<template>
  <view class="approval-process">
    <uv-steps 
      :current="activeStep" 
      direction="column"
      active-color="#2979ff"
    >
      <!-- 第一步固定为"填写申请" -->
      <uv-steps-item 
        title="填写申请" 
        :desc="getStepDesc(0)"
        :status="getStepStatus(0)"
      ></uv-steps-item>
      
      <!-- 待审批步骤 -->
      <uv-steps-item 
        title="待审批" 
        :desc="getStepDesc(1)"
        :status="getStepStatus(1)"
      ></uv-steps-item>
      
      <!-- 待复核步骤（仅在存在复核人时显示） -->
      <uv-steps-item 
        v-if="hasReviewer" 
        title="待复核" 
        :desc="getStepDesc(2)"
        :status="getStepStatus(2)"
      ></uv-steps-item>
      
      <!-- 结果步骤（根据状态显示审批通过或已驳回） -->
      <uv-steps-item 
        :title="resultTitle" 
        :desc="getStepDesc(resultStepIndex)"
        :status="getStepStatus(resultStepIndex)"
				:error="isError"
      ></uv-steps-item>
    </uv-steps>
    
    <!-- 显示当前状态 -->
    <!-- <view class="status-text">当前状态: {{ currentStatusText }}</view> -->
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  // 审批状态
  processStatus: {
    type: Number,
    default: 0,
    validator: (value) => [0, 1, 2, 3].includes(value)
  },
  // 是否有复核人
  hasReviewer: {
    type: Boolean,
    default: false
  }
})

// 状态枚举文本
const statusTexts = {
  0: '待审批',
  1: '待复核',
  2: '审批通过',
  3: '已驳回'
}

const isError = ref(false)

// 当前状态文本
const currentStatusText = computed(() => statusTexts[props.processStatus])

// 结果步骤的标题
const resultTitle = computed(() => {
  return props.processStatus === 3 ? '已驳回' : '审批通过'
})

// 结果步骤的索引（根据是否有复核人变化）
const resultStepIndex = computed(() => {
  return props.hasReviewer ? 3 : 2
})

// 当前激活的步骤索引
const activeStep = computed(() => {
  switch (props.processStatus) {
    case 0: // 待审批
      return 1
    case 1: // 待复核
      return props.hasReviewer ? 2 : 1 // 如果没有复核人，待审批后直接到结果
    case 2: // 审批通过
    case 3: // 已驳回
      return props.hasReviewer ? 3 : 2
    default:
      return 0
  }
})

// 获取步骤描述
const getStepDesc = (stepIndex) => {
  const currentStep = activeStep.value
  
  if (stepIndex < currentStep) {
    return '已完成'
  } else if (stepIndex === currentStep) {
    if (props.processStatus === 3 && stepIndex === resultStepIndex.value) {
      return '已驳回'
    }
    if (props.processStatus === 2 && stepIndex === resultStepIndex.value) {
      return '审批通过'
    }
    return '进行中'
  } else {
    return '待处理'
  }
}

// 获取每个步骤的状态（uv-ui的status支持：wait、process、finish、error）
const getStepStatus = (stepIndex) => {
  const currentStep = activeStep.value
  
  if (stepIndex < currentStep) {
    // 已完成步骤
    return 'finish'
  } else if (stepIndex === currentStep) {
    // 当前步骤
    if (props.processStatus === 3 && stepIndex === resultStepIndex.value) {
			isError.value = true
      return 'error' // 已驳回状态显示为错误
    }
    return 'process' // 进行中状态
  } else {
    // 未完成步骤
    return 'wait'
  }
}
</script>

<style scoped>
.approval-process {
  padding: 20rpx;
  border: 1px solid #ebeef5;
  border-radius: 8rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.status-text {
  margin-top: 15rpx;
  font-size: 14px;
  color: #606266;
  text-align: center;
}
</style>